<template>
  <div class="wrap">
    <div class="main">
      <el-card class="el-card">
          <h3>方案发布</h3>
          <el-divider></el-divider>
        <el-form :model="ValidateForm" ref="ValidateForm" label-width="100px" class="ruleForm">
          <!--案例标题-->
          <el-form-item
            label="案例标题"
            prop="programmeTitle"
            :rules="[
                    { required: true, message: '案例标题不能为空'}
                  ]"
          >
            <el-input type="text" v-model="ValidateForm.programmeTitle" autocomplete="off"></el-input>
          </el-form-item>
          <!--联系电话-->
          <el-form-item
            label="联系电话"
            prop="contact"
            :rules="[
                    { required: true, message: '联系电话不能为空'}
                  ]"
          >
            <el-input type="text" v-model="ValidateForm.contact" autocomplete="off"></el-input>
          </el-form-item>
          <!--上传图片-->
          <el-form-item label="上传案例图片" prop="programmeImage">
          <el-upload
              class="avatar-uploader"
              action=""
              list-type="picture"
              :show-file-list="false"
              :on-success="handleSuccess"
              :http-request="handleUpload"
          >
              <img v-if="ValidateForm.programmeImage" :src="baseAssets + '/' + ValidateForm.programmeImage" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          </el-form-item>          
          <!-- <el-row :gutter="20" type="flex" align="middle">
            <el-col :span="4">
              <label class="labe_class"><span style="color:red; ">* </span>上传图片</label>
            </el-col>
            <el-col :span="8">
              <el-upload
                class="avatar-uploader"

                prop="programmeImage"
                action=""
                list-type="picture"
                :show-file-list="false"
                :on-success="handleSuccess"
                :http-request="handleUpload">
                <img v-if="ValidateForm.programmeImage" :src="baseAssets + '/' + ValidateForm.programmeImage" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-col>
          </el-row> -->
          <!--案例简介-->
          <el-form-item
                  class="summary_class"
                  label="案例简介"
                  prop="programmeDescription"
                  :rules="[
                              { required: true, message: '案例简介不能为空'}
          ]"
          >
            <el-input type="textarea" v-model="ValidateForm.programmeDescription" autocomplete="off"></el-input>
          </el-form-item>
          <!--案例详情-->
          <el-form-item
                  class="detail_class"
                  label="案例详情"
                  prop="programmeDetail"
                  :rules="[
                              { required: true, message: '案例详情不能为空'}
          ]"
          >
            <el-input type="textarea" v-model="ValidateForm.programmeDetail" autocomplete="off"></el-input>
          </el-form-item>
          <!--按钮-->
          <el-form-item align="right">
            <el-button type="primary" @click="submitForm('ValidateForm')">发布</el-button>
            <el-button @click="resetForm('ValidateForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import { addProgramme } from '@/api/programme'
import { uploadFile } from '@/api/file'

    export default {
        data: function () {
            return {
                baseAssets: process.env.VUE_APP_BASE_ASSETS,
                imageUrl: '',
                ValidateForm: {
                    programmeTitle: '',
                    programmeDescription: '',
                    programmeDetail: '',
                    programmeImage: '',
                    contact: '',
                }
            };
        },
        methods: {
            submitForm (ValidateForm) {
                this.$refs[ValidateForm].validate((valid) => {
                    if (valid) {
                        // alert('submit!')
                        console.log('submit begin!!')
                    } else {
                        console.log('error submit!!')
                        return false
                    }

                    // 发起请求
                    console.log(this.ValidateForm)
                    // const res = programme.add(this.ValidateForm)
                    addProgramme(this.ValidateForm).then((res) => {
                        if(res.success == true)
                        {
                            this.$message("提交成功！")
                        }
                        else
                        {
                            this.$message("提交失败，请重试！")
                        }
                        this.$refs[ValidateForm].resetFields()
                    })
                })
            },
            resetForm (ValidateForm) {
                this.$refs[ValidateForm].resetFields()
            },
            handleDownload (file) {
                console.log(file)
            },
            // 上传图片函数
            handleSuccess() {
              //this.$refs.ValidateForm.resetFields()
            },
            handleUpload (options) {
                let formData = new FormData()
                formData.append('theme', 'programme')
                formData.append('file', options.file)
                uploadFile(formData).then((res) => {
                    if (res.success) {
                        this.ValidateForm.programmeImage = res.data
                    } else {
                        this.$message.error(res.retDesc)
                    }
                })
            }
        }
    }
</script>

<style scoped lang="less">
  .labe_class {
    font-size: 14px;
    color: #606266;
    padding-left: 16px;
  }

  /*.class_foot_gird{*/
    /*height: 80px;*/
  /*}*/
  .wrap{
    .main{
        display: flex;
        justify-content: center;
        align-items: center;
        /*width: 960px;*/
        margin: 0 auto;
        background-color: #F7F7F7;
        .class_header_gird{
            height: 80px;
        }
        .el-card{
            width: 750px;
            margin: 50px 0;
            box-shadow: 0 1px 1px rgba(0,0,0,0.15) !important;
        }
    }
  }
  .summary_class{
    padding-top: 20px;
  }

  .avatar-uploader{
    width: 178px;
    height: 178px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
